<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
<div>
    <div>1、函数传参 一个参数</div>
</div>
<div>
    <button id="yellow">背景变黄</button>
    <button id="red">背景变红</button>
    <button id="black">背景变黑</button>
    <button onclick="mal()">恢复原样</button>
</div>
</div>
<script>
    var yellow = document.getElementById("yellow");
    yellow.addEventListener("click", function (ev) {
        document.body.style.backgroundColor = "yellow";
        document.body.style.transition = "all ease 1s";
    });
    yellow = document.getElementById("red");
    yellow.addEventListener("click", function (ev) {
        document.body.style.backgroundColor = "red";
        document.body.style.transition = "all ease 1s";
    });
    red = document.getElementById("black");
    red.addEventListener("click", function (ev) {
        document.body.style.backgroundColor = "black";
        document.body.style.transition = "all ease 1s";
    });

    function mal() {
        alert("Sorry，我还没学！")
    }
</script>
<br>
<div id="open" style="width: 100%;height: 100px;margin: 0 auto;transition:all ease 1s ;border: 1px solid">
    <div style="margin-left: 30px">
        <div>2、函数传参 两个参数</div>
    </div>


    <p style="margin-left: 30px">
        <button type="button" onclick="setstyle('width','41%');">背景变窄</button>
        <button type="button" onclick="setstyle('background','yellow');">背景变黄</button>
        <button type="button" onclick="setstyle('height','300px');">背景变高</button>
        <button type="button" onclick="say();">恢复原样</button>
    </p>


</div>
<script>
    function setstyle(name, value) {
        var div2 = document.getElementById('open');
        div2.style[name] = value;
    }

    function say() {
        alert("Sorry，我还没学！")
    }
</script>

<br>
<div id="div3" class="box box-re">

    3、函数传参 参数加变量<br>
    <p>
        <input id="text1" type="text" value="你拍一 我拍一"/>
        <button type="button" onclick="t1('value')">改变文字</button>
        <button type="button" onclick="t1('title')">添加title属性(鼠标经过)</button>
    </p>

</div>

<script>
    function t1(name) {
        var then = document.getElementById('text1');
        then[name] = '两个小孩儿坐灰机';
    }
</script>

<div id="nav">
<div id="div4" class="box box-re">
    4、修改样式 通过调取className<br>
    <p>
        <button type="button" onclick="shop()">变红 变高 变窄</button>
        <button type="button" onclick="say();">恢复原样</button>
    </p>
</div>
</div>
<script>
    function shop()
    {
        var clone=document.getElementById('nav');
        clone.className='clone box box-re';
    }
    function say() {
        alert("恢复原样")
    }
</script>
</body>
</html>